/*
 * 面向属性的 CSS---单个类每一个类只写一种属性
 */

/* 布局方式 */
/*css组件化操作: 把复用的样式抽取出来制作成指定的类,后期需要使用的时候,直接套类名即可---主要作用用于复用,使用频率超过三次以上,才进行抽取,如果使用选择器方便,就不使用组件化*/

.df{
    display: flex;
}
.fdc{
    flex-direction: column;
}
.jcc{
    justify-content: center;
}
.aic{
    align-items: center;
}
.flex{
    flex:1;
}
.overflow{
    overflow: scroll
}

/* 定位 */
.abs{
    position: absolute;
}
.rel{
    position: relative;
}

/* margin */
.mt0{
    margin-top: 0!important;
}
.ml15{
    margin-left: 15px;
}
.ml20{
    margin-left: 20px;
}
.mt10{
    margin-top: 10px;
}
.mt20{
    margin-top: 20px;
}
.mt40{
    margin-top: 40px;
}
.mb20{
    margin-bottom: 20px;
}

.mt80{
    margin-top: 80px;
}
/* padding */
.plr32{
    padding:0 32px 0
}
/* boder */
/* 字体颜色 */
.cf{
    color:#fff;
}
.c9a{
    color:#9a9a9a;
}
/* 文本居中 */
.tcenter{
    text-align: center;
}
/* 字体大小 */
.f12{
    font-size: 12px;
}
.f14{
    font-size: 14px;
}
.f16{
    font-size: 16px;
}
.f18{
    font-size: 18px;
}
.f20{
    font-size: 20px;
}
.f22{
    font-size: 22px;
}
/* 背景色 */
.bgce8{
    background-color: #e8e8e8;
}
.bgcff{
    background-color: #fff;
}
/* 背景图 */
.bg01{
    background: url(../imgs/index-swiper-bg1.jpg) no-repeat center;
    background-size: cover;
}
.bg02{
    background: url(../imgs/index-swiper-bg2.jpg) no-repeat center;
    background-size: cover;
}
.bg03{
    background: url(../imgs/index-swiper-bg3.jpg) no-repeat center;
    background-size: cover;
}
